<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <ol>
            <!--item表示数组元素中的内容-->
            <!--index 表示数组元素的下标-->
            <li v-for="(item,index) in peopleArr">{{item+index}}</li>
        </ol>
        <ul>
            <!--item表示数组元素中的内容-->
            <!--index 表示数组元素的下标-->
            <li v-for="(item,index) in studentArr">{{index + '     ' + item.name + '     ' + item.age+ '    ' +item.sex}}</li>
        </ul>

        <table border="1px" cellpadding="0" cellspacing="0" width="400px" align="center">
            <tr align="center">
                <td>编号</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品存货</td>
            </tr>
            <tr v-for="(item,index) in productArr" align="center">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>{{item.num}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data(){
                return{
                    peopleArr:['杨怡','展强','俊蒲','明杨'],
                    studentArr:[
                        {'name':'杨怡','age':20,'sex':'女'},
                        {'name':'展强','age':22,'sex':'男'},
                        {'name':'俊蒲','age':23,'sex':'男'},
                        {'name':'明杨','age':24,'sex':'男'},
                    ],
                    productArr:[
                        {name:'华为手机',price:6800,num:1100},
                        {name:'VIVO',price:3800,num:100},
                        {name:'小米手机',price:2800,num:50},
                    ]
                }
            },
            methods:{

            }
        })
    </script>
</body>
</html>
